<!-- 收藏夹 -->
<template>
  <div id="collection">
    <div class="collection-popup">
      <div class="container">
        <div class="container-title">
          <p class="con-tit">
            收藏车辆
          </p>
          <a 
            class="icon_pop" 
            @click="closeLayer" />
        </div>
        <div class="container-body">
          <el-row 
            v-if="orderList.length"
            tag="ul"
            class="list-body">
            <el-col 
              v-for="(item,index) in orderList"
              :key="index"
              tag="li"
              :span="8"
              class="list">
              <div
                class="list-item"
                @click="goCarDetail(item.car.id)">
                <img :key="item.car.id"
                     v-lazy="item.car.image">
                <h2 class="t">
                  {{ item.car.fullName }}
                </h2>
                <div class="t-i">
                  {{ item.car.year }}<span class="icon-pad">|</span>{{ item.car.kilo }}万公里<span class="icon-pad">|</span>
                  <div class="cancel">
                    <el-button size="mini"
                               @click.stop="cancelCar(item.id)">
                      取消收藏
                    </el-button>
                  </div>
                </div>
                <div class="t-price">
                  <p>{{ item.car.ownerPrice }}<span>万</span></p>
                  <i class="i-orange">超值</i>
                  <i class="i-blue">严选车</i>
                  <em class="line-through">{{ item.car.newCarPrice }}万</em>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="container-footer">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="3"
            :total="total"
            @current-change="changePageIndex" />
        </div>
      </div>
    </div>
    <div class="shade" />
  </div>
</template>

<script>
  import { getOrderList, deleteOrder } from '@/api/order';

  export default {
    name: 'Collection',
    props: {
      show: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        collectionObj: {
          pageIndex: 0,
          pageSize: 3,
          orderInfoStr: {
            orderState: 0,
          },
        },
        orderList: [],
        id: '', // 取消收藏ID
        total: 0,
      };
    },
    watch: {
      show(val) {
        if (val) {
          this.getOrderList();
        }
      },
    },
    methods: {
      closeLayer() {
        this.$emit('close');
      },
      getOrderList() {
        getOrderList(this.collectionObj).then(data => {
          if (!data.success) {
            if (data.errKey === 10001) {
              this.orderList = [];
            }
            return this.$message.error(data.errMsg);
          }
          if (!data.orderList.length) {
            this.orderList = [];
            this.$message.warning('暂无车辆收藏信息。');
            return;
          }
          const list = [];
          data.orderList.forEach(item => {
            list.push({ car: item.car, id: item.id });
          });
          this.orderList = list;
          this.total = data.total;
          this.id = data.id;
        });
      },
      changePageIndex(val) {
        this.collectionObj.pageIndex = val;
        this.getOrderList();
      },
      goCarDetail(id) {
        this.$router.push({ path: '/buyCar/buyDetail', query: { id } });
        this.$emit('close');
      },
      cancelCar(id) {
        const orderInfoStr = { id };
        deleteOrder({ orderInfoStr }).then(data => {
          if (data.success) {
            this.getOrderList();
          }
        });
      },
    },
  };

</script>
<style lang="scss">
#collection {
  .collection-popup {
    .container {
      .container-footer {
        .active {
          background-color: #ff9650;
          color: #fff;
        }
        .el-pager li:hover {
          color: #ff9650;
          &.active {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
<style lang='scss' scoped>
#collection {
  .collection-popup {
    position: fixed;
    z-index: 1000;
    display: block;
    left: 50%;
    top: 50%;
    margin-left: -4.4rem;
    margin-top: -2.5rem;
    .container {
      width: 8.8rem;
      height: 5rem;
      background-color: #fff;
      border-radius: 2px;
      .container-title {
        position: relative;
        .con-tit {
          text-indent: 30px;
          color: #333;
          width: 8.8rem;
          font-weight: 400;
          font-size: 0.2rem;
          line-height: 0.6rem;
          border-bottom: 1px solid #e5e5e5;
        }
        .icon_pop {
          position: absolute;
          right: -0.55rem;
          top: 0.2rem;
          width: 0.2rem;
          height: 0.2rem;
          display: block;
          background-position: 0 -555px;
          background: url(//s5.xinstatic.com/static/newcar-www/imgs/carlist/pop-close_8680677.png)
            no-repeat;
        }
      }
      .container-body {
        width: 8.2rem;
        height: 3.2rem;
        margin: 0.2rem 0.3rem;
        .list-body {
          .list {
            &:hover {
              box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
            }
            .list-item {
              width: 2.6rem;
              height: 2.87rem;
              margin: 0 auto;
              img {
                width: 100%;
                height: 1.8rem;
                border: 1px solid #e9e9e9;
              }
              .t {
                font-size: 0.17rem;
                color: #495056;
                font-weight: 400;
                padding: 10px 0 10px 4px;
              }
              .t-i {
                color: #a5abb2;
                font-size: 0.14rem;
                padding-left: 4px;
                padding-bottom: 2px;
                .icon-pad {
                  display: inline-block;
                  font-size: 0.12rem;
                  width: 0.14rem;
                  text-align: center;
                  vertical-align: top;
                  line-height: 0.2rem;
                }
                .cancel {
                  display: inline-block;
                  float: right;
                  margin-top: -0.1rem;
                }
              }
              .t-price {
                font-size: 0.19rem;
                color: #f95523;
                padding-left: 4px;
                p {
                  float: left;
                  line-height: 0.3rem;
                }
                i {
                  float: right;
                  width: 0.46rem;
                  height: 0.21rem;
                  line-height: 0.21rem;
                  text-align: center;
                  font-size: 0.12rem;
                  margin: 5px 0 0 5px;
                  &.i-orange {
                    color: #ff9650;
                    background: #ffeeda;
                  }
                  &.i-blue {
                    color: #d7a844;
                    background: #fcf2d5;
                  }
                }
                em {
                  float: left;
                  margin-left: 4px;
                  margin-top: 7px;
                  color: #a5abb2;
                  font-size: 0.14rem;
                  &.line-through {
                    text-decoration: line-through;
                  }
                }
              }
            }
          }
        }
      }
      .container-footer {
        float: right;
        margin-right: 0.3rem;
      }
    }
  }
  .shade {
    height: 1000px;
    z-index: 100;
    opacity: 0.6;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #282828;
    width: 100%;
  }
}
</style>
